Day5

今天做html裡面的視訊鏡頭，目前做到請求影音權限
此為做出來的成果

下面這段則是我撰寫在html的程式

程式中的html程式是我設定的class，video名稱是inputvideo，高跟寬分別為150、200，是用來顯示攝影機即時的影像。之後我們會在JS中選取這個元素。

視訊螢幕的流程大概是這樣的：
1.取得使用者視訊鏡頭權限－MediaDevices API
2.將取得視訊鏡頭的影音串流即時播放於瀏覽器－HTML5 Video Element
MediaDevices API 讓網頁能夠存取與系統連接的媒體裝置，例如相機、麥克風、甚至分享螢幕。我們透過 MediaDevices.getUserMedia() 可以請求並取得使用者的視訊鏡頭。
透過 constraints 定義想要取得的影音來源
透過
API的用法是:navigator.mediaDevices.getUserMedia(constraints) 來請求影音權限，並且回傳一個 Promise，當取得影音來源時，會透過 .then() 來回傳 MediaStreams（影音串流） ，因此我們可以透過在 function 中代入變數 stream （可自取變數名稱，慣例上用 stream）來取得影音串流的內容，在這裡影音串流的內容其實就是當前透過攝影機和麥克風取得的影音內容。